<template>
  <div style="padding: 6px;">
    <el-form ref="searchForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Title">
            <el-input v-model="sd.title" size="small" placeholder="Title" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button class="mt_5" type="primary" size="mini" icon="el-icon-search" @click="searchOrder">search</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="16">
      <el-col :span="6" v-for="(item,index) in orderObj.list" :key="item.id + '-' + index">
        <el-card class="box-card">
          <div slot="header">
            <span style="font-size: 18px;font-weight: bold">{{item.title}}</span>
            <a href="javascript:;" style="float: right" @click="orderView(item.id)">Order View</a>
          </div>
          <div class="divnr">Customer Name：<span>{{item.kehuusername}}</span></div>
          <div class="divnr">
            Expected Completion Date：<span><DateFormat :value="item.completedate" :format="'YYYY-MM-DD'"></DateFormat></span>
          </div>
          <div style="width: 80%;padding:10px 0 10px 2%">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="item.speed" :status="item.speed >80?'success':item.speed>60?'':'warning'" ></el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination v-if="orderObj.total>sd.pageSize" class="center" background layout="total, prev, pager, next"
                   @current-change="loadOrder" :total="orderObj.total"
                   :current-page.sync="sd.pageNum" :page-size="sd.pageSize">
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      sd: {
        title : '',
        pageNum: 1,
        pageSize: 12
      },
      orderObj: {},
    }
  },
  mounted() {
    this.loadOrder()
  },

  methods: {
    searchOrder(){
      this.sd.pageNum = 1;
      this.loadOrder();
    },
    loadOrder() {
      request({
        url: '/emp/order/pagekehuorder',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.orderObj = data
      })
    },
    orderView(orderId){
      this.$router.push({path: '/publicnav/orderinfo', query :{orderId : orderId} })
    }
  }
}
</script>

<style lang="scss" scoped>
div.divnr{
  text-indent: 16px;
  font-size: 14px;
  color: #666666;
  height: 30px;
  line-height: 30px;
}
div.cardfooter{
  text-align: right;
  padding-bottom: 5px;
  padding-right: 5px;
}
</style>
